<template>
  <div>
    <div class="banner">
      <h1 class="banner-title">文章</h1>
    </div>
    <div class="maincontain">
      <el-row class="artbg">
        <el-col :span="13" :offset="3">
          <el-card class="bg">
            <h1 class="messtitle">{{ article.title }}</h1>
            <blockquote>
              {{
                "作者：" +
                article.author +
                " | 创建时间：" +
                article.gmtCreate +
                " | 浏览数：" +
                article.views +
                " | 分类：" +
                article.category +
                " | 标签：" +
                article.tags.join("、")
              }}
            </blockquote>
            <div class="articlecontent">
              <VueShowdown
                :markdown="article.content"
                flavor="vanilla"
                :options="{ emoji: true, tables: true }"
                :extensions="extensions"
                class="markdown-body articlecontent"
              />
              <!-- <h1>1</h1>
              <h2>22</h2>
              <h3>333</h3> -->
            </div>
          </el-card>

          <div class="card-container">
            <el-card class="cardbg">
              <h1>评论区</h1>
              <Valine></Valine>
            </el-card>
          </div>
        </el-col>

        <el-col :span="4" :offset="1">
          <blog-info></blog-info>
          <div style="position: sticky; top: 20px">
            <!-- <el-card class="rightcontainer">
              <div class="righttitle">
                <i class="el-icon-s-unfold" style="font-size: 16.8px"></i>
                <span style="margin-left: 10px">目录</span>
              </div>
              <div id="articletoc">
                
              </div>
            </el-card> -->

            <el-card class="rightcontainer" style="margin-top: 20px">
              <div class="righttitle">
                <i class="el-icon-tickets" style="font-size: 16.8px"></i>
                <span style="margin-left: 10px">热门文章QAQ~</span>
              </div>
              <div class="articlelist">
                <div
                  class="articleitem"
                  v-for="articletext in pageInfo.records"
                  :key="articletext.id"
                >
                  <div class="contentcover">
                    <router-link
                      class="contentcover"
                      :to="'/post/' + articletext.id"
                      :v-html="articletext.title"
                    >
                      <img :src="photo" />
                    </router-link>
                  </div>
                  <!-- <img :src="photo"  class="contentcover" /> -->
                  <div class="content">
                    <div class="contenttitle">
                      <router-link
                        :to="'/post/' + articletext.id"
                        :v-html="articletext.title"
                        >{{ articletext.title }}</router-link
                      >
                    </div>
                    <div class="contenttime">{{ articletext.gmtUpdate }}</div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import request from "@/http/request";

import showdownHighlight from "showdown-highlight";

import * as tocbot from "tocbot";

import { mapState } from "vuex";

import Valine from "valine";
export default {
  name: "Article",
  data() {
    return {
      article: { content: "" },
      extensions: [showdownHighlight],
      pageInfo: {},
      wordNum: {},
      imgurl: [


        "http://img.xiyblog.cn/img/1.jpg",
        "http://img.xiyblog.cn/img/12.jpg",
        "http://img.xiyblog.cn/img/13.jpg",
        "http://img.xiyblog.cn/img/14.jpg",
        "http://img.xiyblog.cn/img/15.jpg",
        "http://img.xiyblog.cn/img/27.jpg",
      ],
    };
  },
  mounted() {
    this.tocinit();
  },
  computed: mapState(["blogInfo"]),
  components: {
    BlogInfo: () => import("@/components/BlogInfo.vue"),
    Valine: () => import("@/components/Valine.vue"),
  },

  destroyed() {
    tocbot.refresh();
    tocbot.destroy();
  },
  created() {
    request
      .getArticleByID(this.$route.params.id) //获取路由的路径参数，即文章id
      .then((res) => {
        if (res.code === 0) {
          this.article = res.data;
          // console.log(res);
        } else {
          this.$notify.error({
            title: "提示",
            message: res.msg,
          });
        }
      })
      .catch((err) => {
        console.log(err);
        this.$notify.error({
          title: "提示",
          message: "网络繁忙，文章获取失败",
        });
      });

    this.getPageArticles(1, 4);
    this.img = Math.floor(Math.random() * 6);
    this.photo = this.imgurl[this.img];
  },

  methods: {
    handleCurrentChange(page) {
      this.getPageArticles(page, 4);
    },
    getPageArticles(page, limit) {
      request
        .getArticles(page, limit)
        .then((res) => {
          if (res.code === 0) {
            this.pageInfo = res.data;
            // console.log(res);
            // console.log(this.pageInfo);
          } else {
            this.$notify.error({
              title: "提示",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$notify.error({
            title: "提示",
            message: "网络繁忙，文章获取失败",
          });
        });
    },
    tocinit() {
      // 添加文章生成目录功能
      let nodes = this.$refs.article.children;
      if (nodes.length) {
        for (let i = 0; i < nodes.length; i++) {
          let node = nodes[i];
          let reg = /^H[1-4]{1}$/;
          if (reg.exec(node.tagName)) {
            node.id = i;
          }
        }
      }
      tocbot.init({
        tocSelector: "#articletoc",
        contentSelector: ".articlecontent",
        headingSelector: "h1, h2, h3",
        hasInnerContainers: true,
      });
    },
  },
};
</script>

<style scoped>
h1 {
  display: flex;
  justify-content: center;
  font-size: 2.4rem;
  margin-bottom: 8px;
  color: #2ba1d1;
}

.card-container {
  overflow-x: hidden;
}
.cardbg {
  /* background-color: #eee; */
  opacity: 0.9;
  height: 100%;
  /* display: flex;
  flex-direction: column; */
  position: relative;
  animation: main 1s;
  max-width: 951px;
  /* padding: 24px 40px; */
  margin: 26px auto 17px auto;
  /* overflow: scroll; */
}
.articlecontent {
  font-family: "Courier New", Courier, monospace;
}
#articletoc {
  border: 1px solid #49b1f5;
}

blockquote {
  line-height: 2;
  margin: 0;
  font-size: 15px;
  border-left: 0.2rem solid #49b1f5;
  padding: 10px 1rem !important;
  background-color: #ecf7fe;
  border-radius: 4px;
  margin-bottom: 12px;
}
.messtitle {
  font-size: 2.8rem;
  color: #2ba1d1;
  margin-bottom: 12px;
  margin-left: 8px;
}

.maincontain {
  margin-bottom: 20px;
}
.rightcontainer {
  padding: 20px 24px;
  font-size: 14px;
  opacity: 0.8;
}
.righttitle {
  display: flex;
  align-items: center;
  line-height: 2;
  font-size: 16.8px;
  margin-bottom: 6px;
  padding: 2px;
}
.righttitle i {
  font-weight: bold;
  padding: 2px;
}
.banner {
  /* position: absolute; */
  /* background-color: #49b1f5 !important; */
  top: -60px;
  left: 0;
  right: 0;
  height: 260px;
  animation: header-effect 1s;
  opacity: 0.8;
  background-color: rgba(0, 0, 0, 0.6);
}
.banner-title {
  animation: title-scale 1s;
  position: absolute;
  top: 11.5rem;
  padding: 0 0.5rem;
  width: 100%;
  font-size: 2.5rem;
  text-align: center;
  color: #eee;
}
.el-card {
  margin-top: 15px;
  padding: 12px;
}
.el-row {
  height: calc(100% - 60px);
}

.artbg {
  height: 100%;
}
.bg {
  background-color: #eee;
  opacity: 0.9;
}

.articleitem {
  display: flex;
  align-items: center;
  padding: 6px 0;
}
.articleitem:first-child {
  padding-top: 0;
}
.articleitem:last-child {
  padding-bottom: 0;
}
.articleitem:not(:last-child) {
  border-bottom: 1px dashed #f5f5f5;
}
.articleitem img {
  width: 100%;
  height: 100%;
  transition: all 0.6s;
  object-fit: cover;
}
.articleitem img:hover {
  transform: scale(1.1);
}

.content {
  flex: 1;
  padding-left: 10px;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.contentcover {
  width: 58.8px;
  height: 58.8px;
  overflow: hidden;
}
.contenttitle a {
  transition: all 0.2s;
  font-size: 95%;
  text-decoration: none;
  color: #858585;
}
.contenttitle a:hover {
  color: #2ba1d1;
}
.contenttime {
  color: #858585;
  font-size: 85%;
  line-height: 2;
}
</style>
